@import shared.Pojo.VarInfoDataKind
@import shared.Pojo.BiomDataKind
@()(implicit messages: Messages)
<div id="fileModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="width: 1000px">
		<div class="modal-content">
			<div class="modal-header bg-primary">
				<h4 class="modal-title">
					<span id="lblAddTitle" style="font-weight: bold">@messages("selectFile")</span>
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
					<i class="fa fa-remove"></i>
				</button>
			</div>

			<form class="form-horizontal" action="" data-toggle="validator" enctype="multipart/form-data">
				<div class="modal-body">
					<div class="row-fluid">

						<ul class="nav nav-tabs myMainUl" >

							<li class="active">
								<a href="#metData" data-toggle="tab" > @{messages("matrixFile")} </a>
							</li>

							<li class="" >
								<a href="#example" data-toggle="tab" > @messages("exampleFile") </a>
							</li>

							<li class="" >
								<a href="#group" data-toggle="tab" > @messages("groupFile") </a>
							</li>

							<li class="" >
								<a href="#@VarInfoDataKind.name" data-toggle="tab" > @messages("varInfoFile") </a>
							</li>

							<li class="" >
								<a href="#@BiomDataKind.name" data-toggle="tab" > @messages("biomFile") </a>
							</li>

							<li class="" >
								<a href="#missionResult" data-toggle="tab" > @messages("missionResultFile") </a>
							</li>

						</ul>

						<div id="myTabContent" class="tab-content" style="margin-top: 20px">

							<div class="tab-pane " id="example">

								<div class="table-responsive">

									<div style="display: none;
										margin-bottom: 10px">@{messages("filteringAndSort")}：
										<span id="filterCondition">

											<span class="eachFilterCondition" style="display: none">
												<span >Gene ID</span>
												<span style="color: red">LIKE</span>
												AT
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("sortingConditions")}：
										<span id="sortCondition">

											<span class="eachFilterCondition" style="display: block">
												<span >Gene ID ,</span>
												<span style="color: red">@messages("ascending")</span>
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<table class="display table table-bordered" id="table" data-pagination="true"
									data-page-list="[10, 25, 50, 100, all]" data-toolbar="#toolbar">
										<thead>

											<tr class="myTr">

											</tr>

										</thead>
									</table>

									<div id="allFilterContent">

									</div>

								</div>

							</div>

							<div class="tab-pane fade in active" id="metData">

								<div class="table-responsive">

									<div style="margin-bottom: 15px">
										<a type="button" class="btn btn-primary" id="deleteButton" href="@routes.DataController.manageBefore" target="_blank">
											<i class="fa fa-cloud-upload"></i>&nbsp;@messages("upload")
										</a>
										<a type="button" class="btn btn-primary" href="javascript:;" onclick="MetSelectTab.refreshTable()">
											<i class="fa fa-refresh"></i>&nbsp;@messages("refresh")
										</a>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("filteringAndSort")}：
										<span id="filterCondition">

											<span class="eachFilterCondition" style="display: none">
												<span >Gene ID</span>
												<span style="color: red">LIKE</span>
												AT
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("sortingConditions")}：
										<span id="sortCondition">

											<span class="eachFilterCondition" style="display: block">
												<span >Gene ID ,</span>
												<span style="color: red">@messages("ascending")</span>
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<table class="display table table-bordered" id="table" data-pagination="true"
									data-page-list="[10, 25, 50, 100, all]" data-toolbar="#toolbar">
										<thead>

											<tr class="myTr">

											</tr>

										</thead>
									</table>

									<div id="allFilterContent">

									</div>

								</div>

							</div>

							<div class="tab-pane " id="group">

								<div class="table-responsive">

									<div style="margin-bottom: 15px">
										<a type="button" class="btn btn-primary" id="deleteButton" href="@routes.DataController.manageBefore" target="_blank">
											<i class="fa fa-cloud-upload"></i>&nbsp;@messages("upload")
										</a>
										<a type="button" class="btn btn-primary" href="javascript:;" onclick="GroupSelectTab.refreshTable()">
											<i class="fa fa-refresh"></i>&nbsp;@messages("refresh")
										</a>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("filteringAndSort")}：
										<span id="filterCondition">

											<span class="eachFilterCondition" style="display: none">
												<span >Gene ID</span>
												<span style="color: red">LIKE</span>
												AT
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("sortingConditions")}：
										<span id="sortCondition">

											<span class="eachFilterCondition" style="display: block">
												<span >Gene ID ,</span>
												<span style="color: red">@messages("ascending")</span>
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<table class="display table table-bordered" id="table" data-pagination="true"
									data-page-list="[10, 25, 50, 100, all]" data-toolbar="#toolbar">
										<thead>

											<tr class="myTr">

											</tr>

										</thead>
									</table>

									<div id="allFilterContent">

									</div>

								</div>

							</div>

							<div class="tab-pane  " id="@VarInfoDataKind.name">

								<div class="table-responsive">

									<div style="margin-bottom: 15px">
										<a type="button" class="btn btn-primary" id="deleteButton" href="@routes.DataController.manageBefore" target="_blank">
											<i class="fa fa-cloud-upload"></i>&nbsp;@messages("upload")
										</a>
										<a type="button" class="btn btn-primary" href="javascript:;" onclick="VarInfoSelectTab.refreshTable()">
											<i class="fa fa-refresh"></i>&nbsp;@messages("refresh")
										</a>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("filteringAndSort")}：
										<span id="filterCondition">

											<span class="eachFilterCondition" style="display: none">
												<span >Gene ID</span>
												<span style="color: red">LIKE</span>
												AT
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("sortingConditions")}：
										<span id="sortCondition">

											<span class="eachFilterCondition" style="display: block">
												<span >Gene ID ,</span>
												<span style="color: red">@messages("ascending")</span>
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<table class="display table table-bordered" id="table" data-pagination="true"
									data-page-list="[10, 25, 50, 100, all]" data-toolbar="#toolbar">
										<thead>

											<tr class="myTr">

											</tr>

										</thead>
									</table>

									<div id="allFilterContent">

									</div>

								</div>

							</div>

							<div class="tab-pane  " id="@BiomDataKind.name">

								<div class="table-responsive">

									<div style="margin-bottom: 15px">
										<a type="button" class="btn btn-primary" id="deleteButton" href="@routes.DataController.manageBefore" target="_blank">
											<i class="fa fa-cloud-upload"></i>&nbsp;@messages("upload")
										</a>
										<a type="button" class="btn btn-primary myRefresh" href="javascript:;" >
											<i class="fa fa-refresh"></i>&nbsp;@messages("refresh")
										</a>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("filteringAndSort")}：
									<span id="filterCondition">

										<span class="eachFilterCondition" style="display: none">
											<span >Gene ID</span>
											<span style="color: red">LIKE</span>
											AT
											<sup style="" class="mySup" onclick="SampleManage.removeCondition">
												<i class="fa fa-times-circle"></i>
											</sup>
										</span>

									</span>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("sortingConditions")}：
									<span id="sortCondition">

										<span class="eachFilterCondition" style="display: block">
											<span >Gene ID ,</span>
											<span style="color: red">@messages("ascending")</span>
											<sup style="" class="mySup" onclick="SampleManage.removeCondition">
												<i class="fa fa-times-circle"></i>
											</sup>
										</span>

									</span>
									</div>

									<table class="display table table-bordered" id="table" data-pagination="true"
									data-page-list="[10, 25, 50, 100, all]" data-toolbar="#toolbar">
										<thead>

											<tr class="myTr">

											</tr>

										</thead>
									</table>

									<div id="allFilterContent">

									</div>

								</div>

							</div>

							<div class="tab-pane  " id="missionResult">

								<div class="table-responsive">

									<div style="margin-bottom: 15px">
										<a type="button" class="btn btn-primary" href="javascript:;" onclick="MissionResultSelectTab.refreshTable()">
											<i class="fa fa-refresh"></i>&nbsp;@messages("refresh")
										</a>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("filteringAndSort")}：
										<span id="filterCondition">

											<span class="eachFilterCondition" style="display: none">
												<span >Gene ID</span>
												<span style="color: red">LIKE</span>
												AT
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<div style="display: none;
										margin-bottom: 10px">@{messages("sortingConditions")}：
										<span id="sortCondition">

											<span class="eachFilterCondition" style="display: block">
												<span >Gene ID ,</span>
												<span style="color: red">@messages("ascending")</span>
												<sup style="" class="mySup" onclick="SampleManage.removeCondition">
													<i class="fa fa-times-circle"></i>
												</sup>
											</span>

										</span>
									</div>

									<table class="display table table-bordered" id="table" data-pagination="true"
									data-page-list="[10, 25, 50, 100, all]" data-toolbar="#toolbar">
										<thead>

											<tr class="myTr">

											</tr>

										</thead>
									</table>

									<div id="allFilterContent">

									</div>

								</div>

							</div>

						</div>


					</div>
				</div>

				<div class="modal-footer bg-info">
					<button type="button" class="btn green" data-dismiss="modal">
						@messages("cancel")</button>
				</div>
			</form>

		</div>
	</div>
</div>
